<template>
    <div class="container">
        <div class="card">
            <!-- 抬头类型 -->
            <div class="card-title">抬头类型</div>
            <div class="card-content">
                <div class="radio-group">
                    <div class="radio-item" @click="titleType = 'PERSONAL'">
                        <img v-if="titleType === 'PERSONAL'" :src="imgs.radioChecked" alt="" />
                        <img v-else :src="imgs.radioUnchecked" alt="" />
                        企业单位
                    </div>
                    <div class="radio-item" @click="titleType = 'ENTERPRISE'">
                        <img v-if="titleType === 'ENTERPRISE'" :src="imgs.radioChecked" alt="" />
                        <img v-else :src="imgs.radioUnchecked" alt="" />
                        个人/非企业
                    </div>
                </div>
            </div>
            <div class="card-title">发票抬头</div>
            <div class="card-content">
                <input v-model="title" placeholder="请输入" />
            </div>
            <div v-if="titleType === 'ENTERPRISE'" class="card-title">税号</div>
            <div v-if="titleType === 'ENTERPRISE'" class="card-content">
                <input v-model="taxNo" placeholder="请输入" />
            </div>
            <div class="card-title">电话</div>
            <div class="card-content">
                <input v-model="phone" placeholder="请输入" />
            </div>
            <div class="card-title">开户银行</div>
            <div class="card-content">
                <input v-model="bank" placeholder="请输入" />
            </div>
            <div class="card-title">银行账户</div>
            <div class="card-content">
                <input v-model="bankAccount" placeholder="请输入" />
            </div>
            <div class="card-title">注册地址</div>
            <div class="card-content">
                <textarea v-model="address" placeholder="请输入"> </textarea>
            </div>
            <div class="card-title">备注</div>
            <div class="card-content">
                <textarea v-model="mark" placeholder="请输入"> </textarea>
            </div>
        </div>

        <div class="submit" @click="submit">提交电子发票</div>
    </div>
</template>
<script>
import { submitInvoiceAPI } from "../src/api/api";

const app = getApp();

export default {
    data() {
        return {
            imgs: app.globalData.imgs,
            loading: false,

            // 表单内容
            titleType: "PERSONAL", // 抬头类型 PERSONAL个人 ENTERPRISE企业
            title: "", // 抬头
            taxNo: "", // 税号
            phone: "", // 电话
            bank: "", // 开户银行
            bankAccount: "", // 银行账户
            address: "", // 注册地址
            mark: "", // 备注
        };
    },
    onShareAppMessage() {},
    onLoad(optinos) {
        this.charge_order_no = optinos.charge_order_no || "";
        this.device_serial_num = optinos.device_serial_num || "";
    },
    methods: {
        onChange(fileList) {
            let done = true;
            fileList.detail.forEach((item) => {
                if (item.status !== "done") {
                    done = false;
                }
            });
            if (done) {
                this.fileList = fileList.detail.map((item) => item.url);
                console.log(this.fileList);
            }
        },
        // 表单校验
        checkForm() {
            if (!this.title) {
                uni.showToast({
                    title: "请输入发票抬头",
                    icon: "none",
                });
                return false;
            }
            if (this.titleType === "ENTERPRISE" && !this.taxNo) {
                uni.showToast({
                    title: "请输入税号",
                    icon: "none",
                });
                return false;
            }
            if (!this.phone) {
                uni.showToast({
                    title: "请输入电话",
                    icon: "none",
                });
                return false;
            }
            if (!this.bank) {
                uni.showToast({
                    title: "请输入开户银行",
                    icon: "none",
                });
                return false;
            }
            if (!this.bankAccount) {
                uni.showToast({
                    title: "请输入银行账户",
                    icon: "none",
                });
                return false;
            }
            if (!this.address) {
                uni.showToast({
                    title: "请输入注册地址",
                    icon: "none",
                });
                return false;
            }
            return true
        },
        // 开票
        submit() {
            if (this.loading) return false;
            if (!this.checkForm()) return false;
            this.loading = true;
            let orderNos = uni.getStorageSync("invoiceOrderNos");
            submitInvoiceAPI({
                address: this.address,
                bank: this.bank,
                bankAccount: this.bankAccount,
                mark: this.mark,
                orderNos,
                phone: this.phone,
                taxNo: this.taxNo,
                title: this.title,
                titleType: this.titleType,
            })
                .then((res) => {
                    uni.showToast({
                        title: "提交成功",
                        icon: "success",
                    });
                    this.loading = false;
                    setTimeout(() => {
                        uni.reLaunch({
                            url: "/pages/index",
                        });
                    }, 1500);
                })
                .catch((err) => {
                    this.loading = false;
                });
        },
    },
};
</script>
<style scoped lang="scss">
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f6f6f6;
    padding-top: 24rpx;
    min-height: 100vh;
    box-sizing: border-box;
    .card {
        width: 694rpx;
        padding: 28rpx;
        box-sizing: border-box;
        border-radius: 24rpx;
        background-color: #fff;
        margin-bottom: 200rpx;
        .card-title {
            font-size: 32rpx;
            line-height: 42rpx;
            color: #333;
            margin-bottom: 28rpx;
        }
        .card-content {
            position: relative;
            margin-bottom: 28rpx;
            .radio-group {
                display: flex;
                align-items: center;
                .radio-item {
                    display: flex;
                    align-items: center;
                    font-size: 24rpx;
                    line-height: 1;
                    margin-right: 30rpx;
                    color: #666;
                    img {
                        width: 28rpx;
                        height: 28rpx;
                        margin-right: 8rpx;
                    }
                }
            }
            input {
                width: 100%;
                height: 100rpx;
                background-color: #f6f6f6;
                border-radius: 16rpx;
                padding: 24rpx;
                font-size: 28rpx;
                line-height: 38rpx;
                color: #333;
                box-sizing: border-box;
            }
            textarea {
                width: 100%;
                height: 160rpx;
                background-color: #f6f6f6;
                border-radius: 16rpx;
                padding: 24rpx;
                font-size: 28rpx;
                line-height: 38rpx;
                color: #333;
                box-sizing: border-box;
            }
        }
    }
    .submit {
        position: fixed;
        left: 28rpx;
        bottom: 80rpx;
        width: 694rpx;
        height: 84rpx;
        border-radius: 42rpx;
        background: linear-gradient(90deg, #8bdab0 0%, #08bfa8 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
        line-height: 1;
        color: #fff;
        z-index: 3;
    }
}
</style>
